import React, { useState, useEffect,useContext } from 'react'
import Router from 'next/router'
import Link from 'next/link'
import { Row, Col, Menu, Icon, Button, List, Avatar,message } from 'antd'
import axios from 'axios'
import { FatherContext } from '../pages/detailed';
import servicePath from '../config/apiUrl'
import "../static/style/components/msg.css"
import { Input } from 'antd';
import moment from "moment"
const { TextArea } = Input;
const Msg = () => {
    const data = [
        {
            title: 'Ant Design Title 1',
        },
        {
            title: 'Ant Design Title 2',
        },
        {
            title: 'Ant Design Title 3',
        },
        {
            title: 'Ant Design Title 4',
        },
    ];
    const [userName, setUserName] = useState("")
    const [email, setEmail] = useState("")
    const [content, setContent] = useState("")
    const [articleMsg, setArticleMsg] = useState("")
    const articleId = useContext(FatherContext);
    console.log(articleId,"----");
    const pushArticle = ()=>{
        axios.post(servicePath.setUserMsg,{userName,email,content,articleId}).then(res=>{
            if(res.data.isScuccess){
                message.success('留言成功');
                initMsg()
            }else{
                message.error(`${res.data.msg}`);
            }
        })
    }

    const initMsg=()=>{
        axios.post(servicePath.oneArticleMsg,{articleId}).then(res=>{
            setArticleMsg(res.data.data)
        })
    }
    useEffect(()=>{
        initMsg()
    },[])
    return (
        <Row className="comm-main" type="flex" justify="">
            <TextArea onChange={e => {
                setContent(e.target.value)
            }} value={content} rows={2} placeholder="您留言的内容，不支持任何的html格式" />

            <div style={{ display: 'flex', marginTop: "20px" }}>
                <Input.Group compact>
                    <Input style={{ width: '30%' }} disabled={true} defaultValue="您的昵称" />
                    <Input style={{ width: '50%' }} onChange={e => {
                        setUserName(e.target.value)
                    }} defaultValue="" value={userName} />
                </Input.Group>
                <Input.Group compact>
                    <Input style={{ width: '30%' }} disabled={true} defaultValue="电子邮件" />
                    <Input style={{ width: '50%' }} defaultValue="" onChange={e => {
                        setEmail(e.target.value)
                    }} value={email} />
                </Input.Group>
            </div>

            <Button type="primary"  onClick={pushArticle} block style={{ marginTop: "20px" }}>
                提交留言
            </Button>
            <List
                style={{ width: "100%" }}
                itemLayout="horizontal"
                dataSource={articleMsg}
                renderItem={item => (
                    <List.Item>
                        <div style={{ width: "100%",paddingLeft:"15px" }}>
                            <div><span>{item.content}</span></div>
                            <div className="info-user">
                                <div style={{width:"150px"}}>昵称：{item.userName}</div>
                                <div style={{ marginLeft: "20px" }}>时间：{moment(item.addTime).format('YYYY-MM-DD hh:mm:ss')}</div>
                            </div>

                        </div>
                    </List.Item>
                )}
            />
        </Row>

    )
}

export default Msg
